<template>
    <div id="digital-flop">
        <div class="digital-flop-top">
            <div class="title-left">
                <img alt="" src="/img/slices/logo.png"/>
                <div style="font-size: 16px; font-weight: bold;color: #DFEEF3;">{{ form.title }}</div>
            </div>
            <div class="title-right">

            </div>
        </div>
        <div class="digital-flop-bottom">
            <div v-for="(item,index) in digitalFlopData" :key="item.id" class="digital-flop-bottom-card">
                <dv-digital-flop class="left" :config="item.number" style="width:100%;height:40%;" />
                <div v-html="item.title" class="right" :style="{color: color_list[index % 5]}"></div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'MyDigitalFlop',
    data() {
        return {
            dataConfigs: [
                {id: 'street_num', title: '街道数', toFixed: 0, textAlign: 'center', type: 1},
                {id: 'elder_num', title: '长者数', toFixed: 0, textAlign: 'center', type: 1},
                {id: 'socialWork_num', title: '社工数', toFixed: 0, textAlign: 'center', type: 1},
                {id: 'device_num', title: `设备<br/>绑定数`, toFixed: 0, textAlign: 'center', type: 1},
                {id: 'alarm_num', title: `今日<br/>告警数`, toFixed: 0, textAlign: 'center', type: 1}
            ],
            color_list: ['#23FFFC', '#239AFF', '#FED52F', '#60FE2F', '#FE6E2F'],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            form: {
                title: '总体情况',
                street_num: 0, // 街道数
                elder_num: 0, // 长者数
                socialWork_num: 0, // 社工数
                device_num: 0, // 设备绑定警数
                alarm_num: 0, // 今日告警数
            },
            digitalFlopData: [],
        }
    },
    mounted() {
        // 发送请求获取数据
        this.reset()
        this.get_data_request()
    },
    methods: {
        // 重新渲染数字显示
        set_digital_flop_data(data) {
            this.digitalFlopData = []
            this.dataConfigs.forEach((item, index) => {
                this.digitalFlopData.push({
                    title: item.title,
                    number: {
                        number: this.get_number_type(item, data),
                        content: '{nt}',
                        toFixed: item.toFixed,
                        textAlign: item.textAlign,
                        style: {
                            fill: this.color_list[index % 5],
                            fontWeight: 'bold',
                            fontSize: 22
                        }
                    },
                    // unit: item.unit
                })
            })
        },
        get_number_type(item, data) {
            if (item.type === 1) return [data[item.id]]
        },
        // 表单重置
        reset() {
            this.form = {
                title: '总体情况',
                street_num: 0, // 街道数
                elder_num: 0, // 长者数
                socialWork_num: 0, // 社工数
                device_num: 0, // 设备绑定警数
                alarm_num: 0, // 今日告警数
            };
        },

        get_data_request() {
            console.log('获取数据')
            // 获取所有街道数
            this.get_street_data()
            // 获取所有长者数
            this.get_elder_data()
            //  获取所有社工数
            this.get_social_worker_data()
            //  获取所有设备绑定数、获取所有今日告警数
            this.get_device_alarm_data()
        },

        get_street_data() {
            this.form.street_num = Math.floor(Math.random() * 10000 + 100);
            this.set_digital_flop_data(this.form)
            // get_shanghai_area_axios(4).then(res => {
            //     this.form.street_num = res.data.length
            //     console.log('所有街道数', res.data)
            // })
        },

        get_elder_data() {
            this.form.elder_num = Math.floor(Math.random() * 10000 + 100);
            this.set_digital_flop_data(this.form)
            // get_elder_list(this.queryParams)
            //         .then(response => {
            //             this.form.elder_num = response.total;
            //             console.log('所有长者数', response.total)
            //         })
        },

        get_social_worker_data() {
            this.form.socialWork_num = Math.floor(Math.random() * 10000 + 100);
            this.set_digital_flop_data(this.form)
            // get_socialWork_list(this.queryParams)
            //         .then(response => {
            //             this.form.socialWork_num = response.total;
            //             console.log('所有社工数', response.total)
            //         })
        },

        get_device_alarm_data() {
            this.form.device_num = Math.floor(Math.random() * 10000 + 100);
            this.form.alarm_num = Math.floor(Math.random() * 10000 + 100);
            this.set_digital_flop_data(this.form)
            // get_device_deviceAmount().then(res => {
            //     this.form.device_num = res.data.deviceAmount
            //     this.form.alarm_num = res.data.alarmTodayAmount
            //     console.log('所有设备绑定数', res.data)
            // })
        }
    },
}
</script>

<style lang="scss" scoped>
#digital-flop {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;

    .digital-flop-top {
        flex: 1;
        width: 100%;
        height: 100%;
        box-sizing: border-box;

        display: flex;
        align-items: center;
        justify-content: space-between;

        .title-left {
            flex: 1;
            display: flex;
            justify-content: left;
            align-items: center;
            padding-left: 2%;

            img {
                width: 6%;
                padding-right: 2%;
            }
        }

        .title-right {
            flex: 1;
        }
    }


    .digital-flop-bottom {
        flex: 3;
        width: 100%;
        height: 100%;

        display: flex;
        justify-content: space-evenly;
        align-items: center;

        .digital-flop-bottom-card {
            width: 18%;
            height: 75%;
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-size: 100% 100%; /* 背景图片覆盖整个元素 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            background-position: center center; /* 背景图片居中 */

            .left {
                flex: 1.5;
                display: flex;
                justify-content: center;
                box-sizing: border-box;
                align-items: center;
                align-content: center;
                font-size: 19px;
                font-weight: bold;
            }

            .right {
                flex: 1;
                display: flex;
                justify-content: center;
                box-sizing: border-box;
                text-align: right;
                word-wrap: break-word;
                font-size: 14px;
                font-weight: bold;
            }

        }

        .digital-flop-bottom-card:nth-child(1) {
            background-image: url('/public/img/slices/center_top1@2x.png');
        }

        .digital-flop-bottom-card:nth-child(2) {
            background-image: url('/public/img/slices/center_top2@2x.png');
        }

        .digital-flop-bottom-card:nth-child(3) {
            background-image: url('/public/img/slices/center_top3@2x.png');
        }

        .digital-flop-bottom-card:nth-child(4) {
            background-image: url('/public/img/slices/center_top4@2x.png');
        }

        .digital-flop-bottom-card:nth-child(5) {
            background-image: url('/public/img/slices/center_top5@2x.png');
        }
    }

}
</style>
